<template>
	<!-- 主材采购及进厂管理 -->
	<view class="flex-col page">
		<view class="back-w" style="position: fixed;z-index: 9; height: 110rpx;">
			<view class="u-m-l-10" @click="Back()">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
			<view class="f-w-l">主材采购及进厂管理</view>
		</view>
		<view class="flex-col group" style="margin-top: 120rpx;">
		</view>
		<view v-if="this.arrlist!=''">
			<view class="content" v-for="(item,index) in arrlist" :key="index">
				<view class="contentTitle flex-row justify-between">
					<view class="flex-row titleLeft">
						<view class="number">{{index+1}}</view>
						<view>{{item.materialName}}</view>
					</view>
					<view class="Righticon" @click="toEx(item)">
						<image :src="$IMG_URL+'/16557867997271064133.png'" class="image_1" />
					</view>
				</view>
				<view class="uni-container">
					<uni-table ref="table" border stripe emptyText="暂无更多数据">
						<uni-tr style="background-color:rgba(29, 106, 255, 0.06)">
							<uni-td>最晚下单时间</uni-td>
							<uni-td>
								<view class="name">{{item.singleTimeName}}</view>
							</uni-td>
							<uni-td align="center">{{item.singleTime}}</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>现场测量时间</uni-td>
							<uni-td>
								<view class="name">{{item.measureTimeName}}</view>
							</uni-td>
							<uni-td align="center">{{item.measureTime}}</uni-td>
						</uni-tr>
						<uni-tr style="background-color:rgba(29, 106, 255, 0.06)" v-show="!item.isOpen">
							<uni-td>进场安装时间</uni-td>
							<uni-td>
								<view class="name">{{item.installTimeName}}</view>
							</uni-td>
							<uni-td align="center">{{item.installTime}}</uni-td>
						</uni-tr>
						<uni-tr v-show="!item.isOpen">
							<uni-td>订购周期参考</uni-td>
							<uni-td colspan="2" class=''>
								{{item.cycle}}天
							</uni-td>
						</uni-tr>
						<uni-tr style="background-color:rgba(29, 106, 255, 0.06)" v-show="!item.isOpen">
							<uni-td>注意事项(备注）</uni-td>
							<uni-td colspan="2">
								{{item.remarks}}
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="content_bottom">

				</view>
				
				<view class="line flex-row" v-show="item.isOpen" @click="showClick(index)">
					
					<text style="padding-left: 30rpx;">展开</text>
					<text>
						<image :src="$IMG_URL+'16557868056751926228.png'" mode=""></image>
					</text>
				</view>
				<view class="line flex-row" v-show="!item.isOpen" @click="showClick(index)">
					<text style="padding-left: 30rpx;">收起</text>
					<view>
						<image :src="$IMG_URL+'16557868056565062734.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<u-empty style="height: 100vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else>
		</u-empty>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				showType: true,
				arrlist: []
			}
		},
		onLoad() {

		},
		created() {
			this.getdata();
			uni.startPullDownRefresh();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						beforePage.$vm.$refs.projectEx.getJD();
					}

				})
			},
			onPullDownRefresh() {
				this.getdata()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getdata() {
				const projectId = uni.getStorageSync('projectId');
				this.$http('other.mymaterial', {
					projectId: projectId
				}).then(res => {
					if (res.code == 200) {
						this.arrlist = res.data;
					}
				}).catch(err => {

				})
			},
			toEx(item) {
				uni.setStorageSync('item',item);
				uni.navigateTo({

					url: '/pages/foreman/purchaseEdit/purchaseEdit'

				})
			},
			showClick(index) {
				this.arrlist[index].isOpen = !this.arrlist[index].isOpen
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = false
				this.pageCurrent = pageCurrent

			},

		},
	};
</script>

<style scoped lang="scss">
	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		/* align-items: center; */
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 23%;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.uni-container {
		width: 100%;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.uni-table-td {
		padding: 30rpx 20rpx;
	}

	.content {
		width: 93%;
		margin: 0 auto;
	}

	.contentTitle {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(29, 106, 255, 0.6);

	}

	.titleLeft {
		color: #1D6AFF;
		font-size: 30rpx;
		font-weight: 600;
	}

	.number {
		background-image: url($IMG_URL+'16557868051497130564.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 60rpx;
		height: 40rpx;
		color: #fff;
		padding-left: 10rpx;
		margin-right: 20rpx;
	}

	.Righticon {
		width: 26rpx;
		height: 26rpx;
	}

	.Righticon image {
		width: 100%;
		height: 100%;
	}

	.content_bottom {
		height: 2rpx;
		background-color: rgba(238, 238, 238, 1);
		margin-top: 60rpx;
		width: 100%;

	}

	.line {
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 28rpx;
		background-color: rgba(245, 245, 245, 1);
		margin-top: -25rpx;
		margin-left: 79%;
		font-size: 28rpx;
		color: rgba(29, 106, 255, 1);
	}

	.line image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}


	.text-wrapper_1 {
		margin-top: 5rpx;
		flex-shrink: 0;
		padding-top: 5rpx;
		background-image: url($IMG_URL+'16557868051497130564.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 56rpx;
		height: 40rpx;
	}
</style>
